import React, { Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import BeforeEach from "./beforeEach";
import ROUTER_LIST, { RouteRowState } from "./routes";
import RouteLoading from "../components/routeLoading";
// 渲染路由：
//    1. 必须一个满足条件，当前这个角色可以访问当前路由
//    2. 用户登录之后， 后端的返回的信息中， 存在一个字段role, 该字段为角色的权限信息
const routerView = (routes: RouteRowState[]) => {
  // 渲染路由
  return routes.map((v, i) => {
    return (
      <Route
        path={v.path}
        element={<BeforeEach route={v}></BeforeEach>}
        key={i}
      ></Route>
    );
  });
};
// 生成路由表
const generatorRoutes = (routes: RouteRowState[]): RouteRowState[] => {
  // 逻辑实现
  // 路由降维
  return routes.reduce((p, n) => {
    return n.element
      ? // 1. route.element 存在  说明是路由
        p.concat(n)
      : // 2. route.element 不存在  说明是占位导航
        p.concat(n.children ? generatorRoutes(n.children) : []);
  }, [] as RouteRowState[]);
};

const Router: React.FC = () => {
  //  动态生成路由表
  const flatRoutes = generatorRoutes(ROUTER_LIST);
  return (
    // 路由浏览器模式
    <BrowserRouter>
      {/* 懒加载 loading */}
      <Suspense fallback={<RouteLoading></RouteLoading>}>
        {/* 路由单一匹配 */}
        <Routes>
          {/* 动态渲染路由 */}
          {routerView(flatRoutes)}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

export default Router;
